/**
 * #info
 *
 *@author   hanf
 *@createTime   2019/11/14
 *@updateTime   2019/11/14
 *@description  input  component  input组件
 */
/**
 * #item
 *
 * @type        aty-input
 * @cn          输入框
 * @nameprop    label
 * @menu        表单
 * @order       12
 * @stPlugin    true
 * @stContainer false
 * @children    [aty-select,aty-button,aty-text,aty-icon,aty-panel]
 * @mixins      [./components/components/form/form-item/form-item.js]
 */

// 扩展属性
/**
 * #extendproperty
 *
 * @name         slot
 * @cn           插槽
 * @type         list
 * @options      [prepend,append]
 * @description  input插槽，可选值prepend前置内容，append后置内容
 */

import config from '../../../config/config.js'
import formItem from '../form-item/form-item.js'

const componentName = config.prefix + '-input'

// module
const module = {
  name: componentName,
  mixins: [formItem],
  components: {},
  props: {
    /**
     * #property
     *
     * @name    elementId
     * @cn      input id
     * @group   基本属性
     * @type    string
     * @description HTML label元素的for属性 input元素的id属性
     */
    elementId: {
      type: String
    },
    /**
     * #property
     *
     * @name    value
     * @cn      值
     * @group   基本属性
     * @type    string,number
     * @description input组件的值
     */
    value: {
      type: [String, Number],
      default: ''
    },
    /**
     * #property
     *
     * @name    clearable
     * @cn      是否有清除按钮
     * @group   控制
     * @type    boolean
     * @value  false
     * @description 该输入框是否有清除按钮
     */
    clearable: {
      type: Boolean,
      default: false
    },
    /**
     * #property
     *
     * @name    icon
     * @cn      图标
     * @group   基本属性
     * @type    icon
     * @description 输入框尾部图标
     */
    icon: {
      type: String,
      default: ''
    }
  },
  data () {
    return {}
  },
  watch: {
  },
  computed: {
    inputListeners: function () {
      const _this = this
      // `Object.assign` 将所有的对象合并为一个新对象
      return Object.assign({},
        // 从父级添加所有的监听器
        this.$listeners,
        // 自定义监听器，或覆写一些监听器的行为
        {
          input: function (event) {
            // 这里确保组件配合 `v-model` 的工作
            let v = event.target.value
            if (_this.$attrs.type === 'number' && (v === undefined || v === null || v === '' || Number.isNaN(Number(v)))) {
              // 处理firefox浏览器，number的input框可以输入非数字字符的情况
              v = ''
              event.target.value = ''
            }
            _this.$emit('input', v)
          },
          blur: function (event) {
            _this.$emit('blur', event)
            _this.validate()
          }
        }
      )
    },
    inputAttrs: function () {
      return Object.assign({},
        // 默认属性
        {
          type: 'text',
          autocomplete: 'off'
        },
        this.$attrs
      )
    },
    showClear () {
      return this.clearable && this.inputAttrs.disabled === undefined && this.inputAttrs.readonly === undefined
    },
    wrapClasses () {
      return [
        `${componentName}-wrapper`,
        `${componentName}-type-${this.inputAttrs.type}`,
        {
          [`${componentName}-group`]: this.$slots.prepend || this.$slots.append,
          [`${componentName}-group-with-prepend`]: this.$slots.prepend,
          [`${componentName}-group-with-append`]: this.$slots.append
        }
      ].concat(this.formItemClasses)
    },
    wrapStyles () {
      return this.formItemStyles
    },
    // input的class
    inputClasses () {
      return [
        `${componentName}`,
        {
          [`${componentName}-disabled`]: this.inputAttrs.disabled !== undefined && this.inputAttrs.disabled !== false,
          [`${componentName}-hasicon`]: this.clearable || this.icon
        }
      ]
    },
    inputStyles () {
      const style = {}
      return style
    },
    clearClasses () {
      return [
        config.prefix + '-icon',
        config.prefix + '-icon-ios-close',
        componentName + '-icon',
        componentName + '-icon-clear',
        { show: this.value }
      ]
    },
    iconClasses () {
      return [
        config.prefix + '-icon',
        config.prefix + '-icon-' + this.icon,
        componentName + '-icon'
      ]
    }
  },
  methods: {
    // 获得焦点
    focus () {
      // input 获得焦点
      this.$refs.input.focus()
    },
    // 重置为初始值
    reset () {
      this.$refs.input.value = this._originalValue
      this.$emit('input', this._originalValue)
      this.$emit('change')
    },
    // 清空值
    handleClear (event) {
      this.$refs.input.value = ''
      this.$emit('input', '')
      this.$emit('change', event)
      /**
       * #event
       *
       * @name    clear
       * @param   event   当前事件的event对象
       * @body
       * @description 数据清空事件
       */
      this.$emit('clear', event)
    },
    handleIconClick (event) {
      /**
       * #event
       *
       * @name    iconclick
       * @cn      点击图标
       * @param   event   当前事件的event对象
       * @body    console.log(value);
       * @description 设置 icon 属性后，点击图标时触发
       */
      this.$emit('iconclick', event)
    },
    updateIconOffset () {
      if (this.$slots.append) {
        const rightOffset = this.$refs.append.offsetWidth
        if (this.$refs.clearIcon) this.$refs.clearIcon.style.right = `${rightOffset}px`
        if (this.$refs.icon) this.$refs.icon.style.right = `${rightOffset}px`
      }
    }
  },
  updated () {
    this.$nextTick(this.updateIconOffset)
  },
  created () {
    // 保存初始值，用于reset
    this._originalValue = Artery.deepCopy(this.value)
  },
  mounted () {
    this.updateIconOffset()
  }
}
export default module
